<template lang="pug">
  el-dialog(
    title="视频播放"
    :visible="visible"
    width="920px"
    v-loading="loading"
    center
    append-to-body
    v-dialogDrag
    ref="dialog__wrapper"
    @close="closeHandle"
    destroy-on-close
  )
    el-row(:gutter="24")
      el-col(:span="type === 3 ? 24 : 16")
        el-card.videoWrapper
          video(:src="url" style="width: 100%;" :style="{height: type === 3 ? '400px' : '320px'}" controls="controls" autoplay)
          ul(v-if="type !== 3 && type !== 2")
            li 刷卡时间：
              span {{!type ? info.settlingTime : info.settleTime}}
            li {{!type ? '视频拍摄地：' : '刷卡地点：'}}
              span {{!type ? info.orgName : info.hospitalName}}
            li 视频截取时间：
              span {{!type ? info.startDate : infoObj.startTime}} ~ {{!type ? info.endDate : infoObj.endTime}}
          p.mt16.tr
            el-button(type="primary" @click="downloadVideo" size="small" :disabled="!url" :loading="downing") 下载视频
      el-col(:span="8" v-if="!type")
        el-card.tc.mb16(:body-style="{padding: '10px'}")
          h2.f16.mb5 疑似刷卡人
          a-image(
            :url="info.photo"
            height="184px"
            width="184px"
          )
        el-card.tc(:body-style="{padding: '10px'}")
          h2.f16.mb5 卡主模板照
          a-image(
            :url="info.modelAddress"
            height="184px"
            width="184px"
          )
      el-col(:span="8" v-if="type === 1 || type === 4")
        el-alert(:title="'认证状态：' +  info.statusString" :type="info.status === 0 ? 'warning' : 'error'" :closable="false")
        el-card.mt16.videoWrapper(:body-style="{padding: '10px'}")
          p.tc
            a-image(
              :url="info.idcardPhoto"
              height="186px"
              width="186px"
            )
          ul
            li 持卡人: 
              span {{info.name}}
            li 身份证: 
              span {{info.idcard}}
        m-form.mt20(
          labelWidth="100px"
          ref="form"
          :items="formItems"
          size="small"
        )
      el-col(:span="8" v-if="type === 2")
        el-card.videoWrapper(:body-style="{padding: '10px'}")
          el-alert.mb16(:title="'违规信息：' + info.violationInformationTypeStr"  type="error" :closable="false")
          //- 手工上传的视频
          div(v-if="info.truncateType === 2")
            ul
              li 截取时间: 
                span {{info.truncateTimeString}}
              li 拍摄时间: 
                span {{info.shotTimeString}}
              li 拍摄位置: 
                span {{info.shootingPosition}}
              li 备注信息: 
                span {{info.remarks}}
          //- 自动截取的视频
          div(v-else)
            p.tc
              a-image(
                :url="info.photoAddress"
                height="186px"
                width="186px"
              )
            ul
                li 持卡人: 
                  span {{info.name}}
                li 身份证: 
                  span {{info.idcard}}
                li 刷卡时间: 
                  span {{info.shotTimeString}}
                li 刷卡地点: 
                  span {{info.shootingPosition}}
                li 备注信息:
                  span {{info.remarks}}
    span(slot="footer" class="dialog-footer tr")
      el-button(@click="closeHandle" size="small") 取 消
      el-button(@click="submitHandle" type="primary" size="small" v-if="type === 1 || type === 4" :loading="submitting") 确 认
</template>
<script>
import { STable, AImage, MForm} from '@/components'
// import config from '@/config/defaultSetting'
import { downloadVideo, getCommonVideoInfo } from '@/api/dist'
import { violationVideoUpdate } from '@/api/libary'
import { getVideoInfo } from '@/api/scene'
import { exportBlob } from '@/utils/util'

export default {
  name: 'VideoModal',
  components: {
    STable,
    AImage,
    MForm
  },
  mixins: [dictMixin],
  props: {
    info: {
      type: Object,
      default:() => {}
    },
    type: {
      // 默认：没传值-一人多卡， 1: 普通购药, 2: 库-监控视频库, 3:刷卡分析, 4:门特购药
      type: [String, Number],
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'visible',
    event: 'visibleToggle'
  },
  watch: {
    visible (val) {
      if (val) {
        if (this.type === 1 || this.type === 4) {
          this.getVideoInfo()
          if (!this.dict.ViolationInformationType){
            // 获取违规类型
            this.getDict('ViolationInformationType')
          }
        }
      }
    }
  },
  data () {
    return {
      loading: false,
      infoObj: {},
      submitting: false,
      downing: false
    }
  },
  computed: {
    url () {
      const { type, info, infoObj } = this
      return !type ? info.video : (infoObj.url || info.url)
    },
    formItems () {
      // 购药-普通/特殊 标记视频状态
      return [
        {
          key: 'violationInformationType',
          label: '违规标记',
          type: 'select',
          options: this.dict.ViolationInformationType || [],
          initialValue: this.infoObj.violationInformationType ? this.infoObj.violationInformationType.toString() : '',
          rules: [
            { required: true, message: '请输入', trigger: 'blur'},
          ]
        },
        {
          key: 'remarks',
          label: '备注',
          type: 'textarea',
          placeholder: '进一步备注违规详细信息等，最多不超过30个字符',
          initialValue: this.infoObj.remarks || '',
          rules: [
            { max: 30, message: '最多不超过30个字符'},
          ]
        }
      ]
    }
  },
  methods: {
    closeHandle () {
      this.$emit('visibleToggle')
      this.infoObj = {}
    },
    downloadVideo () {
      const that = this
      this.downing = true
      downloadVideo(this.url).then(data => {
        if (data.size > 0){
          exportBlob(data, (this.info.name || '视频') + '.mp4', () => {
            that.$message.success('导出成功')
          })
        } else {
          that.$message.error('视频下载失败')
        }
      }).finally(() => {
        this.downing = false
      })
    },
    // 获取视频详情
    getVideoInfo () {
      if (this.type === 2) {
        getCommonVideoInfo(this.info.id).then(res => {
          this.infoObj = res.data || {}
        })
      } else {
        getVideoInfo({key: this.info.key}, this.type).then(res => {
          this.infoObj = res.data || {}
        })
      }
    },
    // 表格提交
    submitHandle () {
      const that = this
      const {infoObj} = this
      const vals = this.$refs['form'].form
      this.$refs['form'].$refs.form.validate((valid) => {
        if (valid) {
          this.submitting = true
          violationVideoUpdate({...vals, id: infoObj.id}).then(() => {
            that.$message.success('提交成功')
            that.$emit('getList')
            that.closeHandle()
          }).finally(() => {
            that.submitting = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.videoWrapper{
  li {
    margin-top: 10px;

    h4 {
      font-size: 14px;
    }
  }
}
</style>

